import { DirectiveBinding } from 'vue'
const lazyDirective = (el: HTMLImageElement, bind: DirectiveBinding) => {
  let img: HTMLImageElement | null = new Image()
  img.src = bind.value
  const width = el.width
  img.onload = () => {
    const height = img!.height
    const w = img!.width
    const h = Math.floor((height * width) / w)
    el.style.gridRowEnd = `span ${h}`
    el.src = bind.value
    img = null
  }
}
export default lazyDirective
